<script setup lang="ts">
import { ExamApi } from '@/apis'
import { useDictLabel } from '@/hooks'
import VChart from 'vue-echarts'

const props = withDefaults(defineProps<Props>(), {
  examId: '',
})

interface Props {
  examId: string
}

const router = useRouter()
const loading = ref(false)

const dataId = ref()
const dataDetail = ref<ExamApi.ExamDetailResp>()

// 查询详情
const getExamDetail = async () => {
  try {
    loading.value = true
    dataDetail.value = await ExamApi.getExamDetail(dataId.value)
  } finally {
    loading.value = false
  }
}
const getScoreDist = async () => {
  try {
    loading.value = true
    const res = await ExamApi.getScoreDist(dataId.value)
    // scoreRanges.value = res.categories
    scoreRanges.value = Object.keys(res.series).sort((a, b) => a.localeCompare(b))
    chartData.value = []
    for (const key of scoreRanges.value) {
      chartData.value.push({
        name: key,
        value: res.series[key]
      })
    }
    console.log({scoreRanges})
    console.log({chartData})
    // scoreRanges.value.forEach(item => {
    //   chartData.value.push({
    //     name: 
    //     value: fs.number,
    //     size: formatFileSize(fs.size),
    //   })
    // })
    
  } finally {
    loading.value = false
  }
}
const getDataDetail = async () => {
  getExamDetail()
  getScoreDist()
}

const scoreRanges = ref<string[]>([])
const chartData = ref()
const chartOptions = ref({
  type: 'pie',
  title: {
    // text: '成绩分布',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  legend: {
    show: true,
    orient: 'vertical',
    left: 'left',
    // bottom: -5,
    icon: 'circle',
    itemWidth: 6,
    itemHeight: 6,
    textStyle: {
      color: '#4E5969',
    },
    data: scoreRanges,
  },
  series: [
    {
      name: '成绩分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center',
      },
      data: chartData,
    },
  ],
})

watchEffect(() => {
  if (props.examId) {
    dataId.value = props.examId
    getDataDetail()
  }
})
</script>

<template>
  <a-spin :loading="loading" class="w-full">
    <a-page-header :subtitle="dataDetail?.remark" @back="router.back()">
      <template #title>
        <a-space>
          <CellDict :value="dataDetail?.examType" code="ExamTypeEnum" />
          <span class="text-16px color-black font-500">{{ dataDetail?.name || '-' }}</span>
        </a-space>
      </template>
    </a-page-header>
      <a-descriptions :column="{ xs: 2, md: 3, lg: 4 }" class="mx-lg" bordered>
        <a-descriptions-item label="学期">
          {{ dataDetail?.classYear }}/{{ useDictLabel('TermEnum', dataDetail?.term) }}
        </a-descriptions-item>
        <a-descriptions-item label="年级">
          {{ useDictLabel('Grade', dataDetail?.grade) }}
        </a-descriptions-item>
        <a-descriptions-item label="科目">
          {{ useDictLabel('Subject', dataDetail?.subject) }}
        </a-descriptions-item>
        <a-descriptions-item label="试卷总分">
          {{ dataDetail?.totalScore }}
        </a-descriptions-item>
      </a-descriptions>
      <a-row justify="space-between" class="my w-full mx-lg">
        <a-col :span="4">
          <a-statistic title="考试人数" :value="dataDetail?.studentCount" :value-from="0" animation>
            <template #prefix>
              <span class="statistic-prefix bg-#FFE4BA color-#F77234!">
                <icon-user />
              </span>
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="4">
          <a-statistic title="平均分" :value="dataDetail?.averageScore" :value-from="0" animation>
            <template #prefix>
              <span class="statistic-prefix bg-#E8FFFB color-#33D1C9!">
                <icon-translate />
              </span>
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="4">
          <a-statistic title="最高分" :value="dataDetail?.highestScore" :value-from="0" animation>
            <template #prefix>
              <span class="statistic-prefix bg-#E8F3FF color-#165DFF!">
                <icon-thumb-up />
              </span>
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="4">
          <a-statistic title="最低分" :value="dataDetail?.lowestScore" :value-from="0" animation>
            <template #prefix>
              <span class="statistic-prefix bg-#F5E8FF color-#722ED1!">
                <icon-thumb-down />
              </span>
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="6">
          <VChart
            :option="chartOptions"
            :autoresize="true"
            :style="{ width: '100%', height: '100%' }"
          />
          </a-col>

      </a-row>
  </a-spin>
</template>

<style lang="less" scoped>
:deep(.arco-page-header-wrapper) {
  padding: 0;
}
:deep(.arco-statistic) {
  .arco-statistic-title {
    color: rgb(var(--gray-10));
    font-weight: bold;
  }
  .arco-statistic-value {
    display: flex;
    align-items: center;
  }
}

.statistic-prefix {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  border-radius: 6px;
}
</style>
